<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="my-page">
    <view class="user-info">
      <image
        class="avatar"
        src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
        mode="aspectFill"
      ></image>
      <text class="nickname ellipsis-text w-[200rpx]" v-if="userInfo.userName">
        {{ userInfo.userName.slice(0, 6) }}
      </text>
      <text class="nickname" v-else @click="login">未登录</text>
    </view>

    <view class="icontain">
      <view class="flex-y-center" @click="gocard">
        <wd-icon name="lenovo" size="22px" color="#0083ff"></wd-icon>
        <view class="font-min">一卡通</view>
      </view>
      <view class="flex-y-center" @click="goshanghu">
        <wd-icon name="lenovo" size="22px" color="#0083ff"></wd-icon>
        <view class="font-min">商户</view>
      </view>
      <view class="flex-y-center" @click="gocar">
        <wd-icon name="lenovo" size="22px" color="#0083ff"></wd-icon>
        <view class="font-min">停车缴费</view>
      </view>
      <!-- <view class="flex-y-center" @click="dingyue">
        <wd-icon name="lenovo" size="22px" color="#0083ff"></wd-icon>
        <view class="font-min">订阅</view>
      </view> -->
    </view>

    <view class="settings">
      <view class="setting-item" @click="navigateTo('/pages/settings/profile')">
        <text>个人资料</text>
        <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="navigateTo('/pages/settings/security')">
        <text>账号与安全</text>
        <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="navigateTo('/pages/settings/about')">
        <text>关于我们</text>
        <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="call">
        <text>联系我们</text>
        <image class="arrow" src="/static/arrow-right.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- <view class="logout" @click="logout">
      <text>退出登录</text>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
const user = ref({})

import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserStore())

const gocard = () => {
  console.log(666)
  uni.navigateTo({
    url: '/pages/card/card',
  })
}

const goshanghu = () => {
  uni.navigateTo({
    url: '/pages/card/personpay',
  })
}

const login = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

const gocar = () => {
  uni.navigateTo({
    url: '/pages/car/Parkingfee',
  })
}

const call = () => {
  uni.makePhoneCall({
    phoneNumber: '15572909358', // 需要拨打的电话号码
    success: function () {
      console.log('拨打成功')
    },
    fail: function () {
      console.log('拨打失败')
    },
  })
}

const dingyue = () => {}

onShow(() => {
  console.log(userInfo.value)
})
</script>

<style lang="scss" scoped>
.my-page {
  padding: 20px;
  background-color: #f5f5f5;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 15px;
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.icontain {
  display: flex;
  padding: 10px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.icontain > view {
  margin: 20rpx;
}

.flex-y-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100rpx;
  height: 100rpx;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.settings {
  padding: 10px;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:hover {
  background-color: #f7f7f7;
}

.arrow {
  width: 20px;
  height: 20px;
}

.logout {
  padding: 12px 0;
  margin-top: 30px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #ff4c4c;
  border-radius: 25px;
}

.logout:hover {
  background-color: #e63e3e;
}

.font-min {
  font-size: 24rpx;
}
</style>
